<template>
	<view class="work-container">
		<!-- 搜索 -->
		<uni-row>
			<view class="select-container">
				<view class="select-input uni-input-wrapper">
					<uni-row>
						<uni-col :span="21">
							<input v-model="messageParams.equipmentPhouseCode" class="uni-input" placeholder="请输入设备编码"
								@input="filterOptions" />
						</uni-col>
						<uni-col :span="3">
							<text v-if="showClearIcon" class="uni-icon" @click="clearIcon">
								<uni-icons size="20" type="clear"></uni-icons>
							</text>
						</uni-col>
					</uni-row>
				</view>
				<view v-if="showOptions" class="select-dropdown ">
					<view v-for="item in filteredOptions" :key="item.equipmentPhouseCode" class="select-dropdown-child"
						@click="item.equipmentPhouseCode !== '没有匹配数据~~' && selectOption(item)">
						{{ item.equipmentPhouseCode }}
					</view>

				</view>
			</view>
		</uni-row>
		<!-- 表格数据 -->
		<uni-section title="温湿度记录" type="line"></uni-section>
		<uni-row class="center-child">
			<uni-col :span="24">
				<view>
					<view class="uni-container">
						<view class="table-header">
							<!-- 表头 -->
							<view class="header-row" style="width: 100%;">
								<view class="header-cell" style="width: 25%;">栏舍编码</view>
								<view class="header-cell" style="width: 25%">温度</view>
								<view class="header-cell" style="width: 25%">湿度</view>
								<view class="header-cell" style="width: 25%">时间</view>
							</view>
						</view>
						<scroll-view class="table-body" scroll-y="true" style=" width: 100%; height: 200px;">
							<!-- 表格数据 -->
							<view v-for="(item, index) in messageList" :key="index" class="body-row">
								<view class="body-cell msg-txt" style="width: 30%;">
									{{ item.equipmentPhouseCode }}
								</view>
								<view class="body-cell msg-txt" style="width: 20%;">
									{{ item.equipmentTemperature }}
								</view>
								<view class="body-cell msg-txt" style="width: 20%;">
									{{ item.equipmentHumidity }}
								</view>
								<view class="body-cell msg-txt" style="width: 30%;">
									{{ item.creationDate.slice(5, 16) }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<uni-section title="图表" type="line"></uni-section>
		<!-- 轮播图 -->
		<uni-row class="center-child">
			<uni-col :span="24">
				<uni-swiper-dot field="content" mode="default">
					<swiper class="swiper-box" indicator-dots="true"
						style="width: 100%; height: 140px;margin-bottom:20rpx">
						<swiper-item v-for="(item, index) in wsList" :key="index" style="background-color: #efefef;">
							<view class="swiper-item" @click.stop="tableQuery(item)">
								<uni-card class="parent-icon" shadow="hover" style="background-color: #fff;">
									<i v-if="item.wenshiState==='1'" class="uni-icon-success green-icon" title="运行"
										@click.stop="icoeUp(item)"></i>
									<i v-else-if="item.wenshiState==='2'" class="uni-icon-error rea-icon" title="关闭"
										@click.stop="icoeUp(item)"></i>

									<view class="card-content">
										<uni-row class="card-row">
											<uni-col :span="8" class="row-item">设备型号</uni-col>
											<uni-col :span="8" class="row-item">设备品牌</uni-col>
											<uni-col :span="8" class="row-item">栏舍编码</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="8" class="row-item">{{ item.fansType }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.fansBrand }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.phouseCode }}</uni-col>
										</uni-row>
									</view>
								</uni-card>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

			</uni-col>
		</uni-row>
		<!-- 图表 -->
		<uni-row>
			<view class="content">
				<!-- #ifdef APP-PLUS || H5 -->
				<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>

				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<view>非 APP、H5 环境不支持</view>
				<!-- #endif -->
			</view>
		</uni-row>

		<!-- 新增加号 -->
		<!-- <uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="toGasAdd" /> -->
	</view>
</template>

<script>
	import {
		addWS,
		delWS,
		editWS,
		listWS,
		listWSById
	} from "@/api/hmy/ws"
	import {
		findPhouseCode,
		findPhouseCodeAll,
		listEquipment
	} from "@/api/hmy/equipment"
	import * as echarts from "echarts";


	export default {
		name: "WS",
		dicts: ['sys_normal_disable', 'hmy_gas_state', 'hmy_gas_type', 'hmy_park_type'],
		data() {
			return {
				option: {},
				//增加的加号
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					buttonColor: '#55aa7f',
				},
				showClearIcon: false,
				filteredOptions: [], // 过滤后的选项列表
				showOptions: false, // 是否显示下拉列表
				parkCodeList: [],
				parkList: [],
				messageList: [],
				messageParams: {
					pageNum: 1,
					pageSize: 999,
					equipmentPhouseType: "",
					equipmentPhouseCode: ""
				},
				contextMenuVisible: false,
				contextMenuTop: 0,
				contextMenuLeft: 0,
				selectedContextItem: null,

				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 角色表格数据
				roleList: [],
				// 气体检测仪表格数据
				wsList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 日期范围
				dateRange: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 999,
					wenshiBrand: undefined,
					wenshiType: undefined,
					beginTime: undefined,
					endTime: undefined
				},
				// 表单参数
				form: {},
				rules: {},
				defaultProps: {
					children: "children",
					label: "label"
				},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			clearIcon: function() {
				this.messageParams.equipmentPhouseCode = '';
				this.showClearIcon = false;
				this.tableQuery()
			},
			filterOptions() {
				if (this.messageParams.equipmentPhouseCode.trim() === '') {
					this.filteredOptions = [];
					this.showOptions = false;
				} else {
					this.showClearIcon = true;
					this.filteredOptions = this.parkList.filter((item) =>
						item.equipmentPhouseCode.includes(this.messageParams.equipmentPhouseCode)
					);
					if (this.filteredOptions.length === 0) {
						// 如果过滤后的结果为空，手动添加一条数据
						this.filteredOptions.push({
							equipmentPhouseCode: '没有匹配数据~~'
						});
					}
					this.showOptions = true;
				}
			},
			selectOption(item) {
				this.messageParams.equipmentPhouseCode = item.equipmentPhouseCode; // 更新输入框的值
				this.showOptions = false;
				this.tableQuery()
			},
			tableQuery(item) {
				//console.log(item)
				if (item != null) {
					this.showClearIcon = true;
					if (item.phouseCode != null) {
						this.messageParams.equipmentPhouseCode = item.phouseCode
					}
				}
				listEquipment(this.messageParams).then(response => {
					this.messageList = response.rows;
				});
			},
			initOption() {

				// 指定图表的配置项和数据
				this.option = {
					title: {
						text: '温度和湿度',
						left: 'center',
						textStyle: {
							fontSize: 12 // 你可以设置为你需要的字体大小
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					legend: {
						data: ['温度', '湿度'],
						left: 10
					},
					/* 功能 */
					toolbox: {
						top: 20,
						show: true,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {
								readOnly: false
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {}
						}
					},
					axisPointer: {
						link: {
							xAxisIndex: 'all'
						}
					},
					dataZoom: [{

							type: 'inside',
							show: true,
							realtime: true,
							start: 0,
							end: 5
						},
						{

							type: 'inside',
							realtime: true,
							start: 0,
							end: 5,
							xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
							handleSize: '80%', // 设置滑动手柄的大小，例如设置为80%
							// 根据需要启用或禁用缩放和平移
							zoomOnMouseWheel: 'shift', // 只有在按下 shift 的时候才能使用鼠标滚轮缩放
							moveOnMouseMove: true, // 可以通过鼠标拖动来平移
							moveOnMouseWheel: true // 可以通过鼠标滚轮来平移

						}
					],
					grid: [{
							left: 60,
							right: 50,
							height: '35%'
						},
						{
							left: 60,
							right: 50,
							top: '60%',
							height: '30%'
						}
					],
					xAxis: [{
							type: 'category',
							boundaryGap: false,
							axisLine: {
								onZero: true
							},
							position: 'bottom',
							data: this.messageList.map(item => item.creationDate) // 第一个图表的 X 轴数据
						},
						{
							show: false,
							gridIndex: 1, // 指定属于第二个 grid
							type: 'category',
							boundaryGap: false,
							axisLine: {
								onZero: true
							},
							data: this.messageList.map(item => item.creationDate) // 第二个图表的 X 轴数据

						}
					],
					yAxis: [{
							name: '温度(℃)',
							type: 'value',

						},
						{
							gridIndex: 1, // 指定属于第二个 grid
							name: '湿度(%)',
							type: 'value',
							inverse: true
						}
					],
					series: this.seriesData() // 确保这个方法返回的是两个系列的数据
				};
			},
			/** 动态生成折线图*/
			/** 动态生成折线图系列 */
			seriesData() {
				let series = [];
				this.parkList.forEach(cloud => {
					// 筛选出具有相同设备站房代码的messageList项
					const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud
						.equipmentPhouseCode);
					// 生成温度数据系列
					const temperatureSeries = {
						name: '温度 - ' + cloud.equipmentPhouseCode,
						type: 'line',
						symbolSize: 8,
						data: messageItems.map(item => item.equipmentTemperature)
					};

					// 生成湿度数据系列
					const humiditySeries = {
						name: '湿度 - ' + cloud.equipmentPhouseCode,
						type: 'line',
						symbolSize: 8,
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: messageItems.map(item => item.equipmentHumidity)
					};

					// 将生成的温度和湿度系列添加到系列数组中
					series.push(temperatureSeries);
					series.push(humiditySeries);
				});
				return series;
			},
			icoeUp(d) {
				if (d.wenshiState === '1') {
					d.wenshiState = '2'
				} else {
					d.wenshiState = '1'
				}
				editWS({
					"wenshiState": d.wenshiState,
					"wenshiId": d.wenshiId
				}).then(response => {
					this.$modal.msgSuccess("修改成功");
					this.open = false;
					this.getList();
				});
			},
			showDetails(item) {
				listWSById(item.wenshiId).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "查看气体检测仪信息";
				});
			},
			/*右键显示*/
			showContextMenu(event, item) {
				this.contextMenuTop = event.clientY;
				this.contextMenuLeft = event.clientX;
				this.selectedContextItem = item;
				this.contextMenuVisible = true;
			},
			hideContextMenu() {
				this.contextMenuVisible = false;
			},
			/** 查询气体检测仪列表 */
			getList() {
				this.loading = true;
				/** 查询气体检测仪列表 */
				this.queryParams.beginTime = this.dateRange[0]
				this.queryParams.endTime = this.dateRange[1]
				listWS(this.queryParams).then(res => {
					this.wsList = res.rows
					this.total = res.total;
				});
				/** 查询环境信息 */
				listEquipment(this.messageParams).then(response => {
					this.messageList = response.rows;
					console.log("表格树");
					console.log(this.messageList)
					//console.log(1,this.messageList)
					this.initOption()
					this.initEchartDom()
				});
				/** 栏舍下拉选择 */
				findPhouseCode().then(response => {
					this.parkList = response.data;
					console.log(this.parkList)
					this.loading = false;
				});
			},


			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},

			// 表单重置
			reset() {
				this.form = {
					wenshiId: undefined,
					wenshiType: undefined,
					wenshiBrand: undefined,
					wenshiMaterial: undefined,
					wenshiTemperatureRange: undefined,
					wenshiHumidityRange: undefined,
					wenshiTemperaturePrecision: undefined,
					wenshiHumidityPrecision: undefined,
					wenshiProduction: undefined,
					wenshiState: "1",
					remark: undefined
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.wenshiId)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},


			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加设备";
				findPhouseCodeAll().then(response => {
					this.parkCodeList = response.data;
					this.parkCodeList = this.filteredParkCodeList()
				});
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const item = this.selectedContextItem;
				listWSById(item.wenshiId).then(res => {
					this.form = res.data;
					this.open = true;
					this.title = "修改设备";
				})
				this.hideContextMenu();
			},

			/** 提交按钮 */
			submitForm: function() {
				if (this.form.wenshiId != undefined) {
					editWS(this.form).then(response => {
						this.$modal.msgSuccess("修改成功");
						this.open = false;
						this.getList();
					});
				} else {
					addWS(this.form).then(response => {
						this.$modal.msgSuccess("新增成功");
						this.open = false;
						this.getList();
					});
				}
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				const item = this.selectedContextItem;
				this.$modal.confirm('是否确认删除设备编号为"' + item.wenshiId + '"的数据项？').then(function() {
					return delWS(item.wenshiId);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
				this.hideContextMenu();
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/role/export', {
					...this.queryParams
				}, `role_${new Date().getTime()}.xlsx`)
			}
		}
	};
</script>
<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts() {
				// 监听 service 层数据变更
				myChart.setOption(this.option)
			}
		}
	}
</script>
<!--添加样式-->
<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 50px;
		width: 100%;
		height: 300px;
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 16px;
		line-height: inherit;
	}

	/* #endif */

	.select-container {
		position: relative;
		padding: 5px 20px;
		background-color: #F2F2F2;
	}

	.select-input {
		border-radius: 10px;
		/* 设置圆角半径为5px */
		border: 1px solid #ccc;
		/* 添加边框样式 */
		padding: 5px;
		/* 添加内边距 */
		background-color: #fff;
	}

	.select-dropdown {
		width: 80%;
		position: absolute;
		top: 100%;
		z-index: 999;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.select-dropdown-child {
		padding: 5px 40px;
		cursor: pointer;
	}

	/* 子容器居中 */
	.center-child {
		display: flex;
		justify-content: center;

	}


	.card-content {
		padding: 14px;
		background-color: #ededed;
	}

	.card-row {
		margin-bottom: 5px;
		border-bottom: 1px solid #8f939c;
	}

	.row-item {
		text-align: center;
		/* 其他必要的样式 */
	}

	.parent-icon {
		position: relative;
	}

	.green-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: green;
		z-index: 9;
	}

	.rea-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: red;
		z-index: 9;
	}

	.header-row {
		display: flex;
		font-size: 25 rpx;
		margin-bottom: 5px;
	}

	.header-cell {
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	.body-row {
		display: flex;
		font-size: 25 rpx;
	}

	.body-row:nth-child(odd) .body-cell {
		background-color: #f2f2f2;
		/* 灰色背景 */
	}

	.body-cell {
		text-align: center;
		padding: 10 rpx 0;
		border-bottom: 1px solid #ccc;
	}

	.msg-txt {
		flex: 1;
		text-align: center;
		font-size: 20 rpx;
	}
</style>